<template>
  <div class="home">
    <transition name="van-fade">
      <div v-show="$route.path === '/home'">
        <!-- 输入框 -->
        <van-search
          v-model="seachValue"
          placeholder="请输入搜索关键词"
          disabled
          @click="$router.push('/home/searchpopup')"
        />
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
          <van-swipe-item v-for="item in banner" :key="item.id">
            <img :src="item.image_url" alt="" width="100%" />
          </van-swipe-item>
        </van-swipe>
        <!-- 宫格 -->
        <van-grid :column-num="5">
          <van-grid-item
            :icon="item.icon_url"
            :text="item.name"
            v-for="item in channel"
            :key="item.id"
            @click="channelId(item.id)"
          />
        </van-grid>
        <Grid :channelArr="channelArr" />
        <Topic :topicList="topicList" />
      </div>
    </transition>
    <!-- 点击搜索弹出框 -->
    <!-- <transition name="slide"> -->
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>

    
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/Comp.vue'
// import instance from "@/request/request";
import { GetHomeLists } from "@/request/api";
import Grid from "@/components/home/Grid";
import Topic from "@/components/home/Topic";
export default {
  name: "Home",
  data() {
    return {
      seachValue: "",
      banner: [],
      channel: [],
      channelArr: [],
      topicList: [],
    };
  },
  created() {
    GetHomeLists() //只有在api.js中写成函数（函数化）调用才不会在发请求的时候不发送不必要的请求
      .then((res) => {
        // console.log(res.data.data);
        let { banner, channel, topicList } = res.data;
        this.banner = banner;
        this.channel = channel;
        this.topicList = topicList;
      })
      .catch((err) => {
        // console.log("Error");
        console.log(err);
      });
  },
  components: { Grid, Topic },
  methods: {
    channelId(id) {
      this.$router.push('/channel?id='+id)
    },
  },
};
</script>

<style scoped>
/* .slide-enter,.slide-leave-to {
  right: -100%;
}
.slide-enter-active,.slide-leave-active{
  transition: all .5s;
}
.slide-enter-to,.slide-leave{
  right: 0;
} */
.myfade-enter,
.myfade-leave-to {
  opacity: 1;
}
.myfade-enter-active,
.myfade-leave-active {
  transition: all 0.01s;
}
.myfade-enter-to,
.myfade-leave {
  opacity: 0;
}
.home {
  padding-bottom: 0.5rem;
}
</style>